<template>
	<div class="make_an_appointment">
		<div class="teach_h classIndex_h clear">
			<em @click="goback()">预约直播</em>
			<strong><i>></i>预约详情</strong>
		</div>
		<!--  -->
		<div class="publishFrom detailappoint">
			<el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				<el-form-item label="直播名称" prop="name">
					<el-input v-model="ruleForm.name" placeholder="最多可输入20个字" disabled></el-input>
				</el-form-item>
				<el-form-item label="直播时间" prop="liveTime">
					<el-select filterable v-model="ruleForm.liveTime" disabled>
					</el-select>
				</el-form-item>
				<el-form-item label="直播设备" prop="recorder_name">
					<el-select filterable v-model="ruleForm.recorder_name" disabled>
					</el-select>
				</el-form-item>
				<template v-if='!$store.state.isSchool'>
					<el-form-item label="学段">
						<el-select filterable v-model="ruleForm.study_section_id" placeholder="请选择">
							<el-option v-for="(item, index) in orgLevel2" :label="item.name" :value="item.id" :key="index"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="年级">
						<el-select filterable v-model="ruleForm.grade_id" placeholder="请选择">
							<el-option v-for="(item, index) in orgLevel3" :label="item.name" :value="item.id" :key="index"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="科目" >
						<el-select filterable v-model="ruleForm.subject_id" placeholder="请选择">
							<el-option v-for="(item, index) in orgSubject" :label="item.name" :value="item.id" :key="index"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="通知班级" prop="type">
						<el-checkbox-group v-model="ruleForm.type" disabled>
							<template v-for="item in type_id">
								<el-checkbox :label="item.id" :key="item.id">{{item.rename}}</el-checkbox>
							</template>
						</el-checkbox-group>
					</el-form-item>
				</template>
				<el-form-item label="直播简介" prop="profile">
					<el-input type="textarea" :rows="5" resize="none" v-model="ruleForm.profile" disabled></el-input>
				</el-form-item>
				<el-form-item label="封面图片" prop="picture">
					<div class="publishFrom_ box">
						<img :src="BASE_URL + ruleForm.picture">
					</div>
				</el-form-item>
				<template v-if="jurisdictionBol != 0">
					<el-form-item label="观看权限" class="jurisdiction">
						<el-radio-group v-model="ruleForm.jurisdiction" v-show="false">
							<el-radio v-if="ruleForm.jurisdiction == 0" label="0">不限制</el-radio>
							<el-radio v-if="ruleForm.jurisdiction == 1" label="1">按角色限制</el-radio>
							<el-radio v-if="ruleForm.jurisdiction == 2" label="2">按年级限制</el-radio>
							<el-radio v-if="ruleForm.jurisdiction == 3" label="3">按班级限制</el-radio>
						</el-radio-group>
						<!-- 按角色限制 -->
						<template v-if="ruleForm.jurisdiction == 1">
							<el-form-item label-width="0" prop="roleArray" class="roleArray">
								<el-scrollbar>
									<el-checkbox-group v-model="ruleForm.roleArray">
										<template v-for="item of allRoleList">
											<el-checkbox disabled :label="item.id" :key="item.id">{{item.name}}</el-checkbox>
										</template>
									</el-checkbox-group>
								</el-scrollbar>
							</el-form-item>
						</template>
						<!-- 按年级限制 -->
						<template v-if="ruleForm.jurisdiction == 2">
							<el-form-item label-width="0" prop='gradeArray' class="gradeArray">
								<el-scrollbar>
									<el-checkbox-group v-model="ruleForm.gradeArray">
										<template v-for="item of allGradeList">
											<el-checkbox disabled :label="item.id" :key="item.id">{{item.name}}</el-checkbox>
										</template>
									</el-checkbox-group>
								</el-scrollbar>
							</el-form-item>
						</template>
						<!-- 按班级限制 -->
						<template v-if="ruleForm.jurisdiction == 3">
							<el-form-item label-width="0" prop="calssArray" class="calssArray classArray-xx">
								<div class="calssArray-wp">
									<el-tree class="allClass" :data="allClassList" id='tree' show-checkbox ref="tree" node-key="id" default-expand-all highlight-current :props="defaultProps">
									</el-tree>
									<div class="calssArray-r">
										<h3>限制观看班级</h3>
										<el-scrollbar>
											<ul>
												<li v-for="(item, index) of classCheck" :key="index">
													<h3>{{item.name}}</h3>
													<div>
														<template v-for="(tag, index2) of item.children">
															<span :key="index2">{{tag.name}}</span>
														</template>
													</div>
												</li>
											</ul>
										</el-scrollbar>
									</div>
								</div>
							</el-form-item>
						</template>
					</el-form-item>
				</template>
				<el-form-item label="直播密码" prop="password" class="liveCipher" v-if="ruleForm.password">
					<el-input :type="type" v-model="ruleForm.password" disabled></el-input>
					<i class="el-icon-view" @click="lookPassword(1)" v-if="type == 'password' "></i>
					<i class="el-icon-view viewTrue" @click="lookPassword(2)" v-else></i>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>
<script>
export default {
	name: '',
	data() {
		return {
			orgLevel2: this.$g.orgLevel2,
			orgLevel3: [], //年级
			orgSubject: [], //科目
			ruleForm: {
				liveTime: '', //直播时间
				name: '', //视频名称
				profile: '', //视频简介
				picture: '',
				recorder_name: '', //直播设备
				studyname: '', //学段
				gradename: '', //年级
				subjectname: '', //科目
				study_section_id: '',
				grade_id: '',
				subject_id: '',
				type: [], //通知班级
				password: '',
				jurisdiction: '0',
				gradeArray: [],
				roleArray: [],
				calssArray: []
			},
			type: 'password',
			type_id: [],
			OrgLevel: [],
			jurisdictionBol: 0,
			teachClass: [],
			allGradeList: [],
			/*年级数组*/
			allRoleList: [],
			/*角色数组*/
			allClassList: [],
			/*班级数组*/
			classCheck: [],
			checkArray: [],
			idList: [], // 默认level为2、3 id
			defaultProps: {
				children: 'children',
				label: 'name'
			}
		}
	},
	created() {
		this.LiveMSG();
	},
	methods: {
		/**
		 * 对象、树目前的选中状态对象
		 * @DateTime 2019-07-24T09:37:48+0800
		 * @param    {[Strong]}   data    
		 * @param    {[Array]}    checked 四个属性来读取选中的id,对象结构
		 */
		handleCheckChange(data, checked) {

			this.$nextTick(function() {

				let _half = this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys());
				this.defaHalf = _half;

				this.ruleForm.calssArray = _half.filter(items => {
					if (!this.idList.includes(items)) return items;
				})

				let _classCheck = [];
				this.classCheck = [];

				this.allClassList.forEach(item1 => {
					item1.children.forEach(item2 => {
						item2.children.forEach(item3 => {
							if (this.ruleForm.calssArray.includes(item3.id)) {
								_classCheck.push({
									id: item3.id,
									pid: item3.pid,
									name: item3.name
								})
							}
						})
					})
				})

				let _temp = [];
				let _temp1 = [];
				_classCheck.forEach(item => {
					if (!_temp1.includes(item.pid)) {
						_temp1.push(item.pid);
						_temp.push(item);
					}
				})

				_temp.forEach(item => {
					this.classCheck.push({
						name: this.getGradeName(item.pid),
						pid: item.pid,
						children: []
					})
				})

				_classCheck.forEach(item => {
					let inx = _temp1.indexOf(item.pid);

					this.classCheck[inx].children.push({
						id: item.id,
						name: item.name
					})
				})
			});
		},
		/**
		 * 获取年级名字
		 */
		getGradeName(id) {
			let name = '';

			this.allClassList.forEach(item1 => {
				item1.children.forEach(item2 => {
					if (item2.id === id) {
						name = item2.name;
					}
				})
			})

			return name;
		},
		/**
		 * 获取所有班级
		 * @DateTime 2019-08-05T10:49:16+0800
		 * @return   {[type]}                 [description]
		 */
		allClass() {
			let success = (res => {
				this.allClassList = res.data[0].children;

				for (var i = 0; i < this.allClassList.length; i++) {
					if (this.allClassList[i].children !== 0) {

						for (let j = 0; j < this.allClassList[i].children.length; j++) {
							let item = this.allClassList[i].children[j];
							item.disabled = item.children.length > 0 ? false : true;
						}
					}
				}

				// 获取 level 为 2、3 的值
				this.allClassList.forEach(item => {
					this.idList.push(item.id);

					item.children.forEach(item2 => {
						this.idList.push(item2.id);
					})
				})

				this.handleCheckChange();
			});

			this.$ajax({
				url: 'api/org/org',
				method: 'get',
				params: { data_type: 'manage_tree', status: '1,2' },
				func: { success: success }
			})
		},
		/**
		 * 获取所有角色
		 * @DateTime 2019-08-05T10:42:45+0800
		 * @return   {[type]}                 [description]
		 */
		allRole() {
			let success = (res => {
				for (var i = 0; i < res.data.length; i++) {
					if (this.ruleForm.roleArray.includes(res.data[i].id)) {
						this.allRoleList.push(res.data[i])
					}
				}
			});

			this.$ajax({
				url: 'api/role/get_small_role',
				method: 'get',
				params: { type: 1 },
				func: { success: success }
			})
		},
		/*
		    获取所有年级
		 */
		allGrade() {
			let success = (res => {
				for (var i = 0; i < res.data.length; i++) {
					if (this.ruleForm.gradeArray.includes(res.data[i].id)) {
						this.allGradeList.push(res.data[i])
					}
				}
			});

			this.$ajax({
				url: 'api/org/all_grade',
				method: 'get',
				params: {},
				func: { success: success }
			})
		},
		/*
		 *
		 */
		lookPassword(val) {
			this.type = val === 1 ? 'text' : 'password'
		},
		goback() {
			this.$router.back(-1)
		},
		/**
		 * 获取基础数据
		 * @DateTime 2020-03-06T09:54:54+0800
		 */
		LiveMSG() {
			let success = (res => {
				let data = res.data;
				let time = data.start_time.substring(0, 16) + ' - ' + data.end_time.substring(11, 16)
				let str = data.class_id.split(',');
				this.ruleForm.password = data.password
				this.ruleForm.study_section_id = data.study_section_id === 0 ? null : data.study_section_id;
				this.ruleForm.grade_id = data.grade_id === 0 ? null : data.grade_id;
				this.ruleForm.subject_id = data.subject_id===0 ? null : data.grade_id;
				this.ruleForm.name = data.name;
				this.ruleForm.recorder_name = data.recorder_name;
				this.ruleForm.picture = data.picture;
				this.ruleForm.profile = data.profile;
				this.ruleForm.liveTime = time;
				this.ruleForm.type = str
				this.ruleForm.jurisdiction = data.limit_type + ''
				this.jurisdictionBol = this.ruleForm.jurisdiction
				this.getOrgLevel3()
				this.getSubject()

				this.$nextTick(function() {
					switch (this.ruleForm.jurisdiction) {
						case '1':
							this.ruleForm.roleArray = data.limit_id;
							this.allRole();
							break;
						case '2':
							this.ruleForm.gradeArray = data.limit_id;
							this.allGrade();
							break;
						case '3':
							this.ruleForm.calssArray = data.limit_id;
							this.$refs.tree.setCheckedKeys(this.ruleForm.calssArray, true);
							this.allClass();
							break;
						default:
							break;
					}
				});

				this.liveClass();
			});
			this.$ajax({
				url: 'api/live/live',
				method: 'get',
				params: {
					liveid: this.$route.query.id
				},
				func: { success: success }
			})
		},
		//获取年级
		getOrgLevel3() {
			let success = res => {
				let data = res.data;
				this.orgLevel3 = data;
			};
			let params = {
				level: 3,
				pid: this.ruleForm.study_section_id,
				direction: 'balance',
			}

			if (this.$store.state.isCheckLevel) {
				this.$ajax.get('api/newlevel/platform_org', { params: params, func: { success: success } })
			} else {
				this.$ajax.get('api/org/org', { params: params, func: { success: success } })
			}
		},
		//科目
		getSubject() {
			let success = res => {
				let data = res.data;
				this.orgSubject = data;
			};
			let params = {
				type: 2,
				org_id: this.ruleForm.grade_id,
				status: 1,
			}

			if (this.$store.state.isCheckLevel) {
				this.$ajax.get('api/newlevel/platform_subject', { params: params, func: { success: success } })
			} else {
				this.$ajax.get('api/cate/subject', { params: params, func: { success: success } })
			}
		},
		/**
		 * 通知的班级
		 * @DateTime 2020-03-06T09:54:28+0800
		 * @return   {[type]}                 [description]
		 */
		liveClass() {
			let success = (res => {
				let data = res.data;
				if (data.length === 0) { return }
				for (var j = 0; j < data.length; j++) {
					for (var i = 0; i < this.ruleForm.type.length; i++) {
						if (this.ruleForm.type[i] === data[j].id) {
							this.type_id.push(data[j])
						}
					}
				}

			});
			this.$ajax({
				url: 'api/org/class_userid',
				method: 'get',
				params: { user_id: this.$g.user_id },
				func: { success: success }
			})
		},
	},
}
</script>